{% extends "base.html" %}
{% block content %}
        {% load staticfiles %}
        <img src="/static/imgs/commentimage.png" id="pp" style="display: none"/>
    {% if hotel %}
        <center>
        <h2>Hotel Name :</h2><h3> {{ hotel.name }} </h3><br><img src="{% static hotel.image %}" style="border-radius: 12px;"/>
            </center>
        <h2>Rooms :</h2>
        {% if rooms %}
   <section class="container" id="carousel_container">
    <div class="row">
      <div class="span12">
        <div id="artCarousel" class="carousel slide">
          <div class="carousel-inner">
            {% for room in rooms %}
                <div class="item">
               <img src="{% static room.image %}" style="width:1200px;height:400px;">
                   <div class="carousel-caption">
                       <h4>{{ room.name }}</h4>
                       <p>{{ room.type }} | <a href="#">{{ room.number }} Pieaces</a>  are available ! </p>
                   </div>
               </div>
            {% endfor %}
          <a class="left carousel-control" href="#artCarousel" data-slide="prev">&lsaquo;</a>
          <a class="right carousel-control" href="#artCarousel" data-slide="next">&rsaquo;</a>
        </div>
      </div>
    </div>
  </section>
        {% else %}
            No rooms in this hotel !!
        {% endif %}
        <h2>Reviews :</h2>
        <div id="comments">
        {% if reviews %}
            {% for review in reviews %}
                <div class="panel-footer">
                  <img src="/static/imgs/commentimage.png" width="25" style="margin-right: 10px;border-radius: 5px" />
                   <b>{{ review.user }} : </b>  <input type='text' value='{{ review.comment }} - Rate : {{ review.rate }}' style='border: 0px;background-color: #f5f5f5;' disabled/>
                  </div>
               <br>
            {% endfor %}
        {% else %}
            No reviews in this hotel !!
        {% endif %}
        </div>
    {% else %}
        Hotel is not found !!
    {% endif %}
    <hr>
    {% if user.is_authenticated %}
            <select id="rate">
                <option value="0">Choose Rate</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select><br/>
            Comment : <textarea id="comment"></textarea><br/>
            <input type="submit" value="Add" onclick="addComment()"/>
    {% else %}
        <h2>Log in to add Feedback</h1>
    {% endif %}

    <script>
      function addComment() {
            var comment = document.getElementById("comment").value.trim();
            var rate = document.getElementById("rate").value;
            var container = document.getElementById("comments");
            if (rate == 0) {
                alert("Enter Rate Please !!");
                return;
            }
            var userId = {{ user.id }};
            var user = "{{ user }}";
            var hotelId = {{ hotelId }};
           if(comment) {

               var xhr = new XMLHttpRequest();

                xhr.onreadystatechange = function () {
                    if(xhr.readyState === 4) {

                        if(this.responseText === 'Done') {
                            var image = document.getElementById("pp").cloneNode();

                            image.style.display = "inline-block";
                            image.style.marginRight = "10px";
                            image.style.borderRadius = "5px";

                            var div = document.createElement("div");
                            var bold = document.createElement("b");
                            bold.innerHTML =" "+ user+" : ";

                            var classAtt = document.createAttribute("class");
                            var imageAtt = document.createAttribute("width");
                            classAtt.value = "panel-footer";
                            imageAtt.value = "25px";

                            var text = document.createTextNode(comment+"  -Rate : "+rate);
                            div.appendChild(image);
                            div.appendChild(bold);
                            div.appendChild(text);

                            div.setAttributeNode(classAtt);
                            image.setAttributeNode(imageAtt);
                            container.appendChild(div);

                            document.getElementById("comment").value = "";
                            document.getElementById("rate").value = 0 ;
                        }
                        else {
                            alert("Errot while adding comment");
                        }

                    }
                };

                xhr.open("get","/hotels/addComment?hotelId="+hotelId+"&comment="+comment+"&rate="+rate);
                xhr.send();
           }
           else {
            alert("Enter Comment Please !!");
                return;
           }
        }
    </script>
{% endblock %}